import React, { useEffect } from "react"
import styles from "./index.module.scss"

interface FullscreenModalProps {
    isOpen: boolean
    title: string
    onClose: () => void
    children: React.ReactNode
    closeOnEscape?: boolean
    closeOnOutsideClick?: boolean
    className?: string
}

const FullscreenModal: React.FC<FullscreenModalProps> = ({
    isOpen,
    title,
    onClose,
    children,
    closeOnEscape = true,
    closeOnOutsideClick = false,
    className = ""
}) => {
    // 处理ESC键关闭
    useEffect(() => {
        if (!isOpen || !closeOnEscape) return

        const handleKeyDown = (e: KeyboardEvent) => {
            if (e.key === "Escape") {
                onClose()
            }
        }

        window.addEventListener("keydown", handleKeyDown)
        return () => window.removeEventListener("keydown", handleKeyDown)
    }, [isOpen, closeOnEscape, onClose])

    if (!isOpen) return null

    return (
        <div className={`${styles.fullscreenModal} ${className}`}>
            {/* 遮罩层 */}
            <div className={styles.modalOverlay} onClick={closeOnOutsideClick ? onClose : undefined} />

            {/* 模态框主体 */}
            <div className={styles.modalContent}>
                {/* 标题栏 */}
                <div className={styles.modalHeader}>
                    <h2 className={styles.modalTitle}>{title}</h2>
                    <button className={styles.closeButton} onClick={onClose} aria-label="Close modal">
                        &times;
                    </button>
                </div>

                {/* 内容区域 */}
                <div className={styles.modalBody}>{children}</div>
            </div>
        </div>
    )
}

export default FullscreenModal
